//
// Topbar
//

@topbar-color: #ddd;
@topbar-height: 45px;
@topbar-zindex: @zindex-navbar;
@topbar-bg: @navbar-inverse-bg;

@topbar-navigation-color: @topbar-color;
@topbar-navigation-bg: #222;
@topbar-navigation-border-color: #111;

@topbar-dropdown-padding: 16px;
@topbar-dropdown-color: @topbar-navigation-color;
@topbar-dropdown-bg: @topbar-navigation-bg;

@topbar-dropdown-link-bg: @topbar-navigation-bg;
@topbar-dropdown-link-color: #ddd;
@topbar-dropdown-link-hover-bg: #333;
@topbar-dropdown-link-hover-color: #fff;
@topbar-dropdown-link-active-bg: lighten(@topbar-dropdown-bg, 15%);
@topbar-dropdown-link-active-color: #fff;

@tobar-navigation-search-bg: @topbar-navigation-bg;
@tobar-navigation-search-hover-bg: @topbar-dropdown-link-hover-bg;
@tobar-navigation-search-focus-bg: @topbar-dropdown-link-active-bg;


// HOTFIX SCAFFOLDING
[id="typo3-topbar"],
[id="typo3-topbar"] .x-panel-body {
	min-width: 1000px;
}

// Topbar
[id="typo3-topbar"]{
	height: @topbar-height;
	position: relative;
	background-color: @topbar-bg;
	color: @topbar-color;
	.x-panel-bwrap,
	.x-panel-body {
		overflow: visible;
	}
}
.typo3-in-workspace [id="typo3-topbar"] {
	background-color: #6d860d;
	.typo3-topbar-site-name {
		color: #fff;
	}
}

// Container
.typo3-topbar-container {
	.user-select(none);
	height: @topbar-height;
	position: relative;
}

// Site
.typo3-topbar-site {
	display: table;
	padding: 0;
	height: @navbar-height;
	float: left;
}
.typo3-topbar-site-logo,
.typo3-topbar-site-name {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.typo3-topbar-site-logo {
	background-color: @topbar-bg;
	width: 51px;
	.box-shadow(2px 0px 0px rgba(0, 0, 0, 0.15));
	&:hover {
		background-color: @tobar-navigation-search-hover-bg;
	}
	> img {
		max-height: 50px;
	}
}
.typo3-topbar-site-name {
	cursor: default;
	padding: 0 (@grid-gutter-width / 2);
}


// Shared
.typo3-topbar-navigation {
	color: @topbar-navigation-color;
	background-color: @topbar-navigation-bg;
	float: right;
	// Shortcut
	.shortcut {
		min-width: 180px;
	}
	.shortcut-form {
		padding: @topbar-dropdown-padding;
		margin: (@topbar-dropdown-padding / 4) -@topbar-dropdown-padding;
		border-top: 1px solid lighten(@topbar-navigation-border-color,15%);
		background-color: lighten(@topbar-navigation-border-color,10%);
		border-bottom: 1px solid @topbar-navigation-border-color;
	}
}


// Navigation Items
.typo3-topbar-navigation-items {
	height: @topbar-height;
	margin-bottom: 0;
	padding-left: 0;
	list-style: none;
	float: left;
	a {
		color: @topbar-navigation-color;
		text-decoration: none;
	}
	> li {
		float: left;
		height: @topbar-height;
		> a {
			position: relative;
			display: block;
			padding: @navbar-padding-vertical 10px;
			border-left: 1px solid lighten(@topbar-navigation-border-color,10%);
			border-right: 1px solid @topbar-navigation-border-color;
			&:hover,
			&:focus,
			&:active {
				color: @topbar-dropdown-link-hover-color;
				background-color: @topbar-dropdown-link-hover-bg;
				border-left-color: lighten(@topbar-dropdown-link-hover-bg,3%)
			}
		}
	}
	> li.open {
		> a {
			color: @topbar-dropdown-link-active-color;
			background-color: @topbar-dropdown-link-active-bg;
			border-left-color: lighten(@topbar-dropdown-link-active-bg,3%);
		}
	}
}

// Dropdown
.typo3-topbar-navigation-items {
	.dropdown {
		min-width: @topbar-height;
		text-align: center;
		> a > .fa {
			font-size: 16px;
			margin: 0;
			display: inline-block;
			position: relative;
			vertical-align: middle;
			width: auto;
			height: auto;
		}
	}
	.dropdown-toggle {
		position: relative;
		.badge {
			display: none;
			font-size: 10px;
			min-width: 15px;
			height: 15px;
			position: absolute;
			padding: 0;
			border-radius: @border-radius-small;
			line-height: 15px;
			bottom: 5px;
			right: 5px;
		}
	}
	.dropdown-menu {
		left: auto;
		right: 0;
		margin: 0;
		padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
		color: @topbar-dropdown-color;
		background-color: @topbar-dropdown-bg;
		border-color: @topbar-navigation-border-color;
		border-top: 1px solid lighten(@topbar-navigation-border-color, 20%);
		border-left: 0;
		border-right: 0;
		border-radius: 0 0 @border-radius-small @border-radius-small;
		.box-shadow(0px 3px 0px rgba(0, 0, 0, 0.15));
		a {
			color: @topbar-dropdown-link-color;
			white-space: nowrap;
		}
		> *:last-child {
			margin-bottom: 0;
		}
	}
	.dropdown-list {
		.list-unstyled();
		> li {
			.clearfix();
			position: relative;
			&.active .dropdown-list-link {
				background-color: @topbar-dropdown-link-active-bg;
				color: @topbar-dropdown-link-active-color;
			}
		}
		> li + li {
			margin-top: 1px;
		}
		> li.divider + li {
			margin-top: 0;
		}
		.divider {
			border-top: 1px solid @topbar-navigation-border-color;
			background-color: lighten(@topbar-navigation-border-color, 10%);
			margin: (@topbar-dropdown-padding / 2) -@topbar-dropdown-padding;
			padding: 1px 0 0;
		}
		.modlink {
			.clearfix();
			width: 210px;
			.submodule-icon {
				float: left;
				margin-right: 10px;
			}
			.submodule-label {
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-top: 5px;
				display: block;
				overflow: hidden;
				*zoom: 1;
			}
		}
		.dropdown-header {
			font-size: 1em;
			margin-left: -@topbar-dropdown-padding;
			margin-right: -@topbar-dropdown-padding;
			padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
		}
		.dropdown-intro {
			color: darken(@topbar-color, 20%);
			margin-left: -@topbar-dropdown-padding;
			margin-right: -@topbar-dropdown-padding;
			padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
		}
		.dl-horizontal {
			dt {
				width: 140px;
				text-align: left;
				font-weight: normal;
			}
			dd {
				margin-left: 150px;
				width: 170px;
			}
		}
	}
	.dropdown-list-link {
		max-width: 300px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
		text-decoration: none;
		cursor: pointer;
		white-space: nowrap;
		color: @topbar-dropdown-link-color;
		margin-left: -@topbar-dropdown-padding;
		margin-right: -@topbar-dropdown-padding;
		padding: (@topbar-dropdown-padding / 4) @topbar-dropdown-padding;
		&:hover {
			color: @topbar-dropdown-link-hover-color;
			background-color: @topbar-dropdown-link-hover-bg;
		}
		.badge {
			background-color: @brand-danger;
			color: @btn-danger-color;
		}
	}
	.dropdown-list-link-edit,
	.dropdown-list-link-delete,
	.dropdown-list-link-close {
		display: table;
		position: absolute;
		top: 0;
		bottom: 0;
		right: -(@topbar-dropdown-padding / 2);
		padding: 0;
		text-align: center;
		width: 26px;
		height: 26px;
		.t3-icon {
			display: table-cell;
			margin: 0;
			height: auto;
			width: auto;
		}
		&:hover {
			color: @topbar-dropdown-link-hover-color;
			background-color: @topbar-dropdown-link-hover-bg;
		}
	}
	.dropdown-list-link-edit {
		right: 18px;
	}
	.dropdown-list-link-delete,
	.dropdown-list-link-close {
		&:hover {
			color: @topbar-dropdown-link-hover-color;
			background-color: @btn-danger-bg;
		}
	}
	.dropdown-link-list-add-close {
		padding-right: 50px;
	}
	.dropdown-link-list-add-editdelete {
		padding-right: 85px;
	}
	.topbar-workspaces-title {
		margin-left: 3px;
	}
}

// Navigation Search
.typo3-topbar-navigation-search {
	position: relative;
	padding: 0;
	margin: 0;
	.form-group {
		&:before {
			content: "\f002";
			font: normal normal normal 14px/1 FontAwesome;
			position: absolute;
			top: 50%;
			left: 15px;
			margin-top: -8px;
			z-index: 1;
		}
	}
	.form-control {
		box-sizing: content-box;
		background-color: @tobar-navigation-search-bg;
		color: @topbar-navigation-color;
		height: @topbar-height - 27px;
		padding: 14px 30px 13px 35px;
		border: none;
		border-left: 1px solid lighten(@topbar-navigation-border-color, 10%);
		border-radius: 0;
		&:hover {
			border-left-color: lighten(@topbar-navigation-border-color, 15%);
			background-color: @tobar-navigation-search-hover-bg;
		}
		&:focus {
			outline: none;
			border-left-color: lighten(@topbar-navigation-border-color, 15%);
			background-color: @tobar-navigation-search-focus-bg;
			.box-shadow(none);
		}
		+ .t3-icon {
			text-align: center;
			position: absolute;
			top: 50%;
			right: 15px;
			margin-right: 0;
			margin-top: -8px;
		}
	}
}

// Livesearch
.live-search-list {
	.typo3-topbar-navigation-items .dropdown-menu();
	right: auto;
	padding: 0;
	.x-toolbar {
		padding: 0;
		border: none;
		background: transparent;
	}
	.x-combo-list-hd,
	.x-combo-list-inner,
	.x-combo-list-ft {
		border: none;
		background: transparent;
		color: @topbar-dropdown-color;
		padding: @topbar-dropdown-padding;
	}
	.x-combo-list-hd {
		background-color: lighten(@topbar-dropdown-bg,3%);
		border-top: 0;
		border-bottom: 1px solid @topbar-navigation-border-color;
	}
	.x-combo-list-ft {
		padding-top: 0;
		border-bottom: 0;
	}
	.x-combo-list-inner {
		padding-right: 0;
		border-top: 1px solid lighten(@topbar-navigation-border-color, 10%);
	}
	.x-btn {
		background: none;
		border: none;
		color: inherit;
		.x-btn-tl,
		.x-btn-tc,
		.x-btn-tr,
		.x-btn-ml,
		.x-btn-mr,
		.x-btn-bl,
		.x-btn-bc,
		.x-btn-br {
			display: none;
		}
		button {
			.btn();
			.btn-sm();
			.btn-default();
			height: auto!important;
		}
	}
	.search-item-type {
		padding: 5px 20px 5px 0;
		white-space: nowrap;
	}
	.search-item-title {
		border-radius: 2px 0 0 2px;
		padding: 5px 20px 5px 10px;
		&.x-combo-selected {
			border: none!important;
			background-color: lighten(@topbar-dropdown-bg, 10%);
		}
	}
}
.search-list-help-content {
	padding: @topbar-dropdown-padding;
	strong {
		display: block;
		margin-bottom: 0.5em;
	}
	p {
		margin-top: 0.5em;
		margin-bottom: 0;
	}
}
